<template>
    <!-- PAGE CONTENT BEGINS -->
    <div>
        <p>
            <button v-on:click="add()" class="btn btn-white btn-warning btn-round">
                <i class="ace-icon fa fa-edit bigger-120 blue"></i>
                新增
            </button>
            &nbsp;
            <button v-on:click="list()" class="btn btn-white btn-warning btn-round">
                <i class="ace-icon fa fa-refresh bigger-120 blue"></i>
                刷新
            </button>
        </p>
        <table id="simple-table" class="table  table-bordered table-hover">
            <thead>
            <tr>
                <th> ID</th>
                <th> 班级名称</th>
                <th> 班级编号</th>
                <th> 班级教室</th>
                <th> 开班学年</th>
                <th> 学制</th>
                <th> 班主任id</th>
                <th> 辅导员id</th>
                <th> 专业id</th>
                <th> 是否删除</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="classInfo in classInfos" :key="classInfo.num">
                <td> {{classInfo.id}}</td>
                <td> {{classInfo.name}}</td>
                <td> {{classInfo.code}}</td>
                <td> {{classInfo.classRoom}}</td>
                <td> {{classInfo.createYear}}</td>
                <td> {{classInfo.length}}</td>
                <td> {{classInfo.teacherId}}</td>
                <td> {{classInfo.instructor}}</td>
                <td> {{classInfo.majorId}}</td>
                <td> {{classInfo.deleteFlag}}</td>
                <td>
                    <div class="hidden-sm hidden-xs btn-group">
                        <button v-on:click="edit(classInfo)" class="btn btn-xs btn-info">
                            <i class="ace-icon fa fa-pencil bigger-120"></i>
                        </button>

                        <button v-on:click="del(classInfo.id)" class="btn btn-xs btn-danger">
                            <i class="ace-icon fa fa-trash-o bigger-120"></i>
                        </button>
                    </div>

                    <div class="hidden-md hidden-lg">
                        <div class="inline pos-rel">
                            <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                            </button>

                            <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                <li>
                                    <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
                    <span class="blue">
                      <i class="ace-icon fa fa-search-plus bigger-120"></i>
                    </span>
                                    </a>
                                </li>

                                <li>
                                    <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                    <span class="green">
                      <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                    </span>
                                    </a>
                                </li>

                                <li>
                                    <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                    <span class="red">
                      <i class="ace-icon fa fa-trash-o bigger-120"></i>
                    </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <!--模态框-->
        <div class="modal fade" id="myFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">表单</h4>
                    </div>
                    <div class="modal-body">
                        <!--表格-->
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">班级名称</label>
                                <div class="col-sm-10">
                                    <input v-model="classInfo.name" class="form-control" placeholder="输入班级名称"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">班级编号</label>
                                <div class="col-sm-10">
                                    <input v-model="classInfo.code" class="form-control" placeholder="输入班级编号"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">班级教室</label>
                                <div class="col-sm-10">
                                    <input v-model="classInfo.classRoom" class="form-control" placeholder="输入班级教室"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">开班学年</label>
                                <div class="col-sm-10">
                                    <input v-model="classInfo.createYear" class="form-control" placeholder="输入开班学年"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">学制</label>
                                <div class="col-sm-10">
                                    <input v-model="classInfo.length" class="form-control" placeholder="输入学制"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">班主任id</label>
                                <div class="col-sm-10">
                                    <input v-model="classInfo.teacherId" class="form-control" placeholder="输入班主任id"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">辅导员id</label>
                                <div class="col-sm-10">
                                    <input v-model="classInfo.instructor" class="form-control" placeholder="输入辅导员id"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">专业id</label>
                                <div class="col-sm-10">
                                    <input v-model="classInfo.majorId" class="form-control" placeholder="输入专业id"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">是否删除</label>
                                <div class="col-sm-10">
                                    <input v-model="classInfo.deleteFlag" class="form-control" placeholder="输入是否删除"/>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" v-on:click="save()">保存</button>
                    </div>
                </div><!-- /.modal-content-->
            </div><!-- /.modal-dialog-->
        </div><!-- /.modal-->
    </div>
</template>
<script>
  import {apiDefaultErrorHandler} from "../../api/base";
  import classInfoApi from "../../api/work/classInfo";

  export default {
    name: 'system-classInfo',
    data: function () {
      return {
        //映射表单数据
        classInfo: {},
        classInfos: [],
      }
    },
    mounted: function () {
      let _this = this;
      _this.list();
    },
    methods: {

      add() {
        let _this = this;
        _this.classInfo = {};
        $("#myFormModal").modal("show");
      },

      edit(classInfo) {
        let _this = this;
        _this.classInfo = $.extend({}, classInfo);
        $("#myFormModal").modal("show");
      },
      /**查询*/
      list() {
        let _this = this;
        Loading.show();
        classInfoApi.queryAll().then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            _this.classInfos = data.list
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        });
        Loading.hide();
      },
      /**保存*/
      save() {
        let _this = this;
        /**保存校验*/
        if (1 != 1
          || !Validator.require(_this.classInfo.name, "班级名称", 1, 50)
          || !Validator.require(_this.classInfo.code, "班级编号", 1, 50)
          || !Validator.require(_this.classInfo.classRoom, "班级教室", 1, 50)
          || !Validator.require(_this.classInfo.createYear, "开班学年", 1, 50)
        ) {
          return;
        }

        classInfoApi.save(_this.classInfo).then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            console.log("保存{tableNameCn}列表结果：", data);
            $("#myFormModal").modal("hide");
            _this.list();
            toast.success("保存成功！");
          } else {
            toast.warning("操作失败");
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          toast.warning("操作失败");
          apiDefaultErrorHandler(ex)
        })
      },
      /**删除*/
      del(id) {
        let _this = this;
        //弹出框
        Confirm.show("删除{tableNameCn}后不可恢复，您是否检查删除!", function () {
          classInfoApi.delete({id: id}).then(({param}) => {
            if (this.$http.isResponseSuccess(param)) {
              toast.success("删除成功！");
              _this.list()
            } else {
              toast.success("删除成功！");
              _this.list()
            }
          }).catch(() => {
            toast.warning("删除成功！");
            _this.list()
          });
        })
      },
    }
  }
</script>